<template>
  <div class="page">
    <div class="preview-container">
      <component ref="echart" :is="currentComponent"
                 :extend="chartExtend"></component>
    </div>
    <div class="edit-container">
      <el-cascader
          size="small"
          v-model="value"
          :options="options"
          @change="handleChange"></el-cascader>
      <el-button @click="showChartOption" size="small">查看option</el-button>
      <el-dialog :visible.sync="echartOptionShow" width="30%">
        <vue-json-pretty :data="echartOption" :deep="1"></vue-json-pretty>
      </el-dialog>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

export default {
  name: "Preview",
  components: {
    VueJsonPretty,
  },
  data() {
    return {
      value: '',
      selectJson: '',
      echartOptionShow: false,
      echartOption: {},
      dataset: [],
      colors: [],
      options: [
        {
          value: 'legend',
          label: 'legend',
          children: [
            {
              value: 'basic',
              label: '基础设置'
            },
            {
              value: 'item-style',
              label: 'itemStyle'
            },
          ]
        },
        {
          value: 'x-axis',
          label: 'xAxis'
        },
        {
          value: 'y-axis',
          label: 'yAxis'
        },
        {
          value: 'series',
          label: 'series'
        },
      ]
    }
  },
  computed: {
    currentComponent() {
      if (this.$route.params.chart == 'multi-bar') {
        return 'cc-bar-chart'
      }
      return `cc-${this.$route.params.chart}-chart`
    },
    chartExtend() {
      return this.$store.state[this.getCamelCase(this.$route.params.chart)];
    }
  },
  created() {
  },
  methods: {
    handleChange(val) {
      const path = [`/preview/${this.$route.params.chart}`, val.join("/")].join("/")
      this.$router.push({path});
    },
    showChartOption() {
      let echart = this.$refs['echart'].getInstance();
      this.echartOption = echart.getOption();
      this.echartOptionShow = true;
    },
    getKebabCase(str) {
      return str.replace(/[A-Z]/g, function (i) {
        return '-' + i.toLowerCase();
      })
    },
    getCamelCase(str) {
      return str.replace(/-([a-z])/g, function (all, i) {
        return i.toUpperCase();
      })
    }

  }
}
</script>

<style scoped>
.page {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: #ccc;
  align-items: center;
  padding: 0 30px;
}

.preview-container {
  background: #fff;
  width: 800px;
  height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-container {
  padding-top: 40px;
  height: 100vh;
}
</style>
